import { messages } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Button, Badge, Table, Icon } from 'antd'
import BasicInfo from 'components/basic-info'
import SlideFrame from 'components/slide-frame'
import NewExpenseTypeRule from 'containers/expense-reimbursement-control/expense-standard/reimbursement-standard/new-expense-type-rule'
import { setExpenseTypeRules } from 'actions/setting'
import menuRoute from 'routes/menuRoute'
import expenseStandardService from 'containers/expense-reimbursement-control/expense-standard/expense-standard.service'

class ExpenseTypeRules extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      showSlideFrame: false,
      nowData: {},
      expenseTypeRules: {},
      columns: [
        {title: '序号', dataIndex: 'index'},
        {title: '规则名称', dataIndex: 'ruleName'},
        {title: '控制方式', dataIndex: 'actionType'},
        {title: '币种', dataIndex: 'currencyCode'},
        {title: '规则状态', dataIndex: 'enabled',
          render: status => <Badge status={status ? 'success' : 'error'} text={status ? '启用' : '禁用'} />
        },
        {title: '操作', dataIndex: 'operate', render: (text, record) => (
          <span>
            <a onClick={() => this.setState({ showSlideFrame: true, nowData: record })}>编辑</a>
            <span className="ant-divider" />
            <a onClick={() => this.goRules(record)}>详情</a>
          </span>)
        }
      ],
      data: [],
      infoList: [
        {type: 'input', label: '费用类型名称', id: 'name'},
        {type: 'input', label: '费用分类', id: 'categoryName'},
        {type: 'switch', label: '费用状态', id: 'enabled'},
      ]
    }
  }

  goRules = record => {
    let { standardRulesGroup, expenseTypeRules } = this.props;
    let url = menuRoute.getRouteItem('expense-rules').url;
    this.context.router.push(url.replace(':groupId', standardRulesGroup.id).replace(':expenseTypeId', expenseTypeRules.id).replace(':ruleOID', record.ruleOID))
  };

  componentDidMount(){
    let expenseTypeId = this.props.params.expenseTypeId;
    if(expenseTypeId) {
      let expenseTypeRules = {
        index: 1,
        id: '1034342205726870124',
        code: 'DEFAULT_SOBEXP0050',
        name: '中控测试费用标准',
        iconURL: 'https://huilianyi-static.oss-cn-shanghai.aliyuncs.com//cf2b3694-b4f8-4aca-b233-111748eb025b/expenseIcon/e547b892-8f48-498f-8ecf-90ee3fb5fcf3-door.png',
        categoryName: '费用大类',
        apportionEnabled: true,
        enabled: true,
        expenseTypeOID: 'f2e1379a-4f4a-4c78-b04e-1667b635095e'
      };
      this.props.dispatch(setExpenseTypeRules(expenseTypeRules));
      expenseStandardService.getRules(expenseTypeRules.expenseTypeOID).then(res => {
        res.data.map((item, index) => item.index = index + 1);
        this.setState({
          data: res.data,
          expenseTypeRules
        })
      })
    }
  }

  handleClose = () => {
    this.setState({ showSlideFrame: false })
  };

  render() {
    const { data, columns, infoList, expenseTypeRules, showSlideFrame, nowData } = this.state;
    return (
      <div>
        <BasicInfo infoList={infoList}
                   infoData={expenseTypeRules}
                   isHideEditBtn/>
        <div style={{ margin: '30px 0 10px 0' }}>
          <Button type="primary" onClick={() => this.setState({ showSlideFrame: true, nowData: {} })}>
            <Icon type="plus" />&nbsp;新建规则
          </Button>
        </div>
        <Table dataSource={data}
               columns={columns}
               rowKey="ruleOID"/>
        <SlideFrame content={NewExpenseTypeRule}
                    show={showSlideFrame}
                    onClose={() => this.setState({ showSlideFrame: false })}
                    params={{nowData}}
                    afterClose={this.handleClose}
                    title="规则"/>
      </div>
    )
  }
}

ExpenseTypeRules.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    standardRulesGroup: state.setting.standardRulesGroup,
    expenseTypeRules: state.setting.expenseTypeRules
  }
}

export default connect(mapStateToProps)(ExpenseTypeRules)
